<template>
  <div>
    <div class="nav-container">
      <!-- 左侧标签导航 -->
      <div class="tabs-section">
        <div v-for="tab in tabs" :key="tab.value" :class="['tab-item', { 'active': activeTab === tab.value }]"
          @click="switchTab(tab.value)">
          {{ tab.label }}
          <span v-if="tab.notificationCount > 0" class="notification-badge">
            ({{ tab.notificationCount }})
          </span>
        </div>
      </div>

      <!-- 右侧操作区域 -->
      <div class="actions-section">
        <!-- 状态筛选 -->
        <div class="status-filters">
          <el-checkbox-group v-model="statusFilters" @change="handleFilterChange">
            <el-checkbox v-for="filter in filters" :key="filter.value" :label="filter.label" class="status-checkbox" />
          </el-checkbox-group>
        </div>

        <!-- 操作按钮 -->
        <el-button type="primary" icon="el-icon-plus" class="create-button" @click="createNewPlan">
          新建计划
        </el-button>

        <el-button-group class="view-toggle">
          <el-button :type="viewMode === 'calendar' ? 'primary' : ''" icon="el-icon-date"
            @click="switchView('calendar')">
            日历
          </el-button>
          <el-button :type="viewMode === 'list' ? 'primary' : ''" icon="el-icon-tickets" @click="switchView('list')">
            列表
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 内容 -->
    <div class="content-container">
      <!-- 左侧边栏 -->
      <div class="sidebar">
        <div class="panel-header">日历</div>

        <div class="calendar-section">
          <div class="calendar-header">
            <div class="calendar-month">{{ currentMonth }}</div>
            <div class="calendar-controls">
              <button class="calendar-btn" @click="prevMonth">
                <i class="fas fa-chevron-left"></i>
              </button>
              <button class="calendar-btn" @click="nextMonth">
                <i class="fas fa-chevron-right"></i>
              </button>
            </div>
          </div>

          <div class="calendar-grid">
            <div class="weekday">日</div>
            <div class="weekday">一</div>
            <div class="weekday">二</div>
            <div class="weekday">三</div>
            <div class="weekday">四</div>
            <div class="weekday">五</div>
            <div class="weekday">六</div>

            <div v-for="(day, index) in calendarDays" :key="index" class="calendar-day" :class="{
              'selected': isSelectedDay(day),
              'has-tasks': day.taskCount > 0,
              'today': isToday(day.date),
              'not-current': !day.isCurrentMonth
            }" @click="selectDay(day)">
              {{ day.date.getDate() }}
            </div>
          </div>
        </div>

        <div>
          <div class="filter-control">
            <div class="filter-label">等级</div>
            <el-select v-model="qureyParams.level" placeholder="请选择等级" size="small" style="width: 100%;">
              <el-option v-for="item in planGrades" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div class="filter-control">
            <div class="filter-label">类型</div>
            <el-select v-model="qureyParams.type" placeholder="请选择类型" size="small" style="width: 100%;">
              <el-option v-for="item in planTypes" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div class="filter-control">
            <div class="filter-label">是否为外勤计划</div>
            <el-select v-model="qureyParams.isExternal" placeholder="请选择" size="small" style="width: 100%;">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </div>
        </div>
      </div>

      <!-- 中间任务列表 -->
      <div v-if="viewMode === 'list'" class="main-content">
        <div class="date-header">
          <div class="date-title">
            {{ selectedDateString }} {{ dayOfWeek }}
          </div>
        </div>

        <div class="task-list-container">
          <!-- 未完成任务 -->
          <div class="task-section">
            <div class="section-title">
              未完成
              <span class="section-count">({{ pendingTasks.length }})</span>
            </div>

            <div class="task-items" v-if="pendingTasks.length > 0">
              <div v-for="(task, index) in pendingTasks" :key="index" class="task-item"
                :class="{ 'overdue': task.isOverdue }" @click="selectTask(task)">
                <div class="task-header">
                  <!-- <div class="task-tag" :class="task.isOverdue ? 'tag-overdue' : 'tag-normal'">
                    {{ task.isOverdue ? '已超时' : '正常' }} <span v-if="task.level">{{ task.level
                    }}</span>
                  </div> -->

                  <div>
                    <el-checkbox></el-checkbox>
                    <span class="task-tag tag-normal" style="margin: 0 10px;">{{'正常'}}</span>
                    <span>{{ task.title}}</span>
                  </div>

                  <div class="task-creator">
                    {{ task.creator }} 发布于 {{ task.createdAt }}
                  </div>
                </div>

                <div class="task-time">
                  <i class="far fa-clock"></i> {{ task.startTime }} ~ {{ task.endTime }}
                </div>

                <div class="task-meta">
                  <div class="task-type">
                    <i class="fas fa-tag"></i> {{ task.type }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="no-tasks">
              <i class="fas fa-tasks"></i>
              <div>暂无未完成任务</div>
            </div>
          </div>

          <!-- 已完成任务 -->
          <div class="task-section">
            <div class="section-title">
              已完成
              <span class="section-count">({{ completedTasks.length }})</span>
            </div>

            <div class="task-items" v-if="completedTasks.length > 0">
              <div v-for="(task, index) in completedTasks" :key="index" class="task-item" @click="selectTask(task)">
                <div class="task-header">

                  <div>
                    <el-checkbox></el-checkbox>
                    <span class="task-tag tag-normal" style="margin: 0 10px;">{{'正常'}}</span>
                    <span>{{ task.title}}</span>
                  </div>

                  <div class="task-creator">
                    {{ task.creator }} 发布于 {{ task.createdAt }}
                  </div>
                </div>

                <div class="task-time">
                  <i class="far fa-clock"></i> {{ task.startTime }} ~ {{ task.endTime }}
                </div>

                <div class="task-meta">
                  <div class="task-type">
                    <i class="fas fa-tag"></i> {{ task.type }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="no-tasks">
              <i class="fas fa-check-circle"></i>
              <div>暂无已完成任务</div>
            </div>
          </div>

          <!-- 已超时任务 -->
          <div class="task-section">
            <div class="section-title">
              已超时
              <span class="section-count">({{ overdueTasks.length }})</span>
            </div>

            <div class="task-items" v-if="overdueTasks.length > 0">
              <div v-for="(task, index) in overdueTasks" :key="index" class="task-item overdue"
                @click="selectTask(task)">
                <div class="task-header">

                  <div>
                    <el-checkbox></el-checkbox>
                    <span class="task-tag tag-normal" style="margin: 0 10px;">{{'正常'}}</span>
                    <span>{{ task.title}}</span>
                  </div>

                  <div class="task-creator">
                    {{ task.creator }} 发布于 {{ task.createdAt }}
                  </div>
                </div>

                <div class="task-time">
                  <i class="far fa-clock"></i> {{ task.startTime }} ~ {{ task.endTime }}
                </div>

                <div class="task-meta">
                  <div class="task-type">
                    <i class="fas fa-tag"></i> {{ task.type }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="no-tasks">
              <i class="fas fa-exclamation-circle"></i>
              <div>暂无超时任务</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 日历内容 -->
      <div v-if="viewMode === 'calendar'" class="main-content">
        <el-calendar v-model="currentDate">
          <template slot="dateCell" slot-scope="{data}">
            <div :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(1).join('月') }}
            </div>
            <template v-for="index in 2">
              <div v-if="data.isSelected"
                style="font-size: 13px; color: #000; background-color: #e0f0ff; margin: 2px 0;" :key="index"><span
                  style="margin-right: 10px;">未完成</span>京津冀</div>
            </template>

            <!-- 日历内容展开-->
            <div v-if="data.isSelected" style="font-size: 13px; color: #000;">
              <el-popover placement="right" width="400" trigger="hover">
                <div style="height: 32px; line-height: 32px;">{{ data.day }} 共2条计划</div>
                <template v-for="index in 2">
                  <div style="font-size: 13px; color: #000; background-color: #e0f0ff; margin: 2px 0; cursor: pointer;"
                    @click="selectTask()" :key="index">
                    <span style="margin-right: 10px;">未完成</span>京津冀
                  </div>
                </template>

                <div style="font-size: 13px; color: #000; text-align: center;" slot="reference">总共两个任务</div>
              </el-popover>
            </div>
          </template>
        </el-calendar>
      </div>

      <!-- 右侧详情面板 -->
      <div class="detail-panel font13" :class="{ 'collapsed': collapsed }">
        <div class="collapse-btn" @click="collapsed = !collapsed">
          <i :class="collapsed ? 'fas fa-angle-left' : 'fas fa-angle-right'"></i>
        </div>

        <div v-if="selectedTask">
          <div title="" class="flexwrap bor_b1 bor_e" style="height: 55px; padding: 5px 20px; align-items: center;">
            <label class="el-checkbox" style="width: 16px;"><span class="el-checkbox__input"><span
                  class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="false"
                  class="el-checkbox__original" value=""></span><span
                class="el-checkbox__label"><span></span><!----></span></label>
            <div class="mlr_15 el-divider el-divider--vertical"><!----></div>
            <div class="verticall"><span class="in_block icon12 radius_2"
                style="background: rgb(48, 180, 255);"></span><span class="ml_5">正常</span></div>
            <div class="mlr_15 el-divider el-divider--vertical"><!----></div>
            <div class="verticall"><i class="feelec feel-riqi1 colb6 font18"></i><span class="ml_5"> 07-14 09:00 ~ 07-14
                18:00 </span></div>
            <div class="mlr_1 el-divider el-divider--vertical"><!----></div><span class="cole9">超时2天3小时10分</span><!---->
          </div>

          <!-- style="height: calc(100% - 165px); -->
          <div class="wit10 scroll">
            <div class="pdlr_2 bor_e bor_b1 pdtb_2">
              <div class="clear" style="height: 80px;">
                <div class="left" style="width: calc(100% - 120px);">
                  <div class="font18">{{ selectedTask.title }}</div>
                  <div class="verticall mt_20 col6">
                    <div class="verticall"><span style="min-width: 36px;">类型:</span>
                      <div class="ovf lic1" style="max-width: 180px;">日常工作</div>
                    </div>
                    <div class="mlr_15 el-divider el-divider--vertical"></div>
                    <div class="verticall">
                      <span class="ml_5">{{ selectedTask.creator }} 发布于 {{ selectedTask.createdAt }}</span>
                    </div>
                  </div>
                </div>
                <div class="flex-center flexcol schedule-score right">
                  <p class="font28 col2c68 mp_0">0</p>
                  <p class="font13 mp_0">计划总分</p>
                </div>
              </div>

              <div class="info-task-content" v-html="selectedTask.content"></div>

              <div>
                <div class="info-row-title">参与人（{{ selectedTask.participants.length }}）</div>
                <div class="participants-list">
                  <div v-for="(participant, index) in selectedTask.participants" :key="index" class="participant-badge">
                    {{ participant }}
                  </div>
                </div>
              </div>

              <div>
                <div class="info-row-title">知晓人（{{ selectedTask.observers.length }}）</div>
                <div class="participants-list">
                  <div class="participant-badge">系统管理员</div>
                </div>
              </div>

              <div>
                <div class="info-row-title">已读（1）</div>
                <div class="participants-list">
                  <div class="participant-badge">系统管理员</div>
                </div>
              </div>

            </div>
          </div>

          <!-- <div class="wit10 bor_t1 bor_e bgf">
            <div class="wit10 mt_15 pdlr_2">
              <div class="wit10 el-input"><input type="text" autocomplete="off" placeholder="添加评论"
                  class="el-input__inner"></div>
            </div>
            <div class="wit10 pdlr_2 verticalb pdt_1">
              <div class="mt_5 flex"><button type="button" class="el-button el-button--primary el-button--mini"
                  style=""><span>
                    <div class="vertical"><i class="fa fa-edit" aria-hidden="true" /><span class="ml_5">写结果</span></div>
                  </span></button></div>
              <div class="mt_5 verticalr">
                <div title="评论" class="pointer"><i class="fa fa-commenting-o font18 vertical-align-b relative"
                    style="top: 1px;" aria-hidden="true"></i><span class="ml_5">0</span></div>
                <div class="ml_10 pointer"><i class="fa fa-star-o font18 vertical-align-b" aria-hidden="true"></i><span
                    class="ml_5">0</span></div>
                <div class="ml_10 pointer"><i class="fa fa-thumbs-o-up font18 vertical-align-b"
                    aria-hidden="true"></i><span class="ml_5">0</span></div>
              </div>
            </div>
          </div> -->
        </div>

        <div v-else class="no-tasks">
          <i class="fas fa-info-circle" style="font-size: 36px; margin-bottom: 16px; color: #c0c4cc;"></i>
          <div>请选择任务查看详情</div>
        </div>




        <!-- <div v-if="!collapsed">
          <div class="panel-header">任务详情</div>

          <div class="task-info-panel" v-if="selectedTask">
            <div class="task-stats">
              <div class="stat-item">
                <div class="stat-value">100</div>
                <div class="stat-value">计划总分</div>
              </div>
            </div>

            <div class="info-row">
              <div class="info-label">任务名称</div>
              <div class="info-value">{{ selectedTask.title }}</div>
            </div>

            <div class="info-row">
              <div class="info-label">类型</div>
              <div class="info-value">{{ selectedTask.type }}</div>
            </div>

            <div class="info-row">
              <div class="info-label">发布者</div>
              <div class="info-value">{{ selectedTask.creator }} 发布于 {{ selectedTask.createdAt }}</div>
            </div>

            <div class="info-row">
              <div class="info-label">时间</div>
              <div class="info-value">{{ selectedTask.startTime }} ~ {{ selectedTask.endTime }}</div>
            </div>

            <div class="info-row">
              <div class="info-label">等级</div>
              <div class="info-value">{{ selectedTask.level }}</div>
            </div>

            <div class="info-row">
              <div class="info-task-content" v-html="selectedTask.content"></div>
            </div>

            <div>
              <div class="info-row-title">参与人（{{ selectedTask.participants.length }}）</div>
              <div class="participants-list">
                <div v-for="(participant, index) in selectedTask.participants" :key="index" class="participant-badge">
                  {{ participant }}
                </div>
              </div>
            </div>

            <div>
              <div class="info-row-title">知晓人（{{ selectedTask.observers.length }}）</div>
              <div class="participants-list">
                <div class="participant-badge">系统管理员</div>
              </div>
            </div>

            <div>
              <div class="info-row-title">已读（1）</div>
              <div class="participants-list">
                <div class="participant-badge">系统管理员</div>
              </div>
            </div>

            <el-divider></el-divider>

            <div class="info-task-result">
              <div style="margin-bottom: 20px;">结果</div>
              <div style="display: flex; align-items: center; margin-bottom: 16px;">
                <span style="width: 60%; display: flex; align-items: center;"><el-avatar> 李 </el-avatar> <span
                    style="margin-left: 10px;">李三</span></span>
                <span style="width: 30%; ">07-16 16:09</span>
                <span style="width: 10%; cursor: pointer;"><i class="fa fa-edit" aria-hidden="true" /></i></span>
              </div>

              <div class="info-row info-value">结果信息</div>
              <div class="info-row info-value">
                <span style="cursor: pointer;"><i class="fa fa-paperclip" aria-hidden="true" /><span
                    style="margin-left: 5px; margin-right: 16px;">图片.jpg</span></span>

                <span style="color: #409EFF; cursor: pointer;"><i class="fa fa-eye" aria-hidden="true" /><span
                    style="margin: 0 5px;">预览</span></span>
              </div>
            </div>

            <div class="info-task-dynamic"></div>
          </div>

          <div v-else class="no-tasks">
            <i class="fas fa-info-circle" style="font-size: 36px; margin-bottom: 16px; color: #c0c4cc;"></i>
            <div>请选择任务查看详情</div>
          </div>

          <div class="action-buttons">
            <div class="action-button" @click="handleWriteResult"><i class="fa fa-edit" aria-hidden="true"
                style="margin-right: 10px;" /></i>写结果</div>
          </div>
        </div> -->
      </div>

      <!-- 新建计划-->
      <el-dialog title="设置计划" :visible.sync="newPlanDialogVisible" width="600px" @close="handelPlanDialogCancel">
        <div style="height: 630px; overflow-y: auto; padding: 0 20px;">
          <div style="text-align: left; margin-bottom: 16px;"><span style="color: #F56C6C;">*</span>计划标题</div>
          <el-input v-model="planForm.title" placeholder="用一句话描述你的工作计划~"></el-input>

          <div style="text-align: left; margin-bottom: 16px; margin-top: 16px;">计划内容</div>
          <div ref="editor" class="quill-text-editor"></div>

          <el-form :model="planForm" label-position="left">
            <el-form-item label="计划类型" label-width="108px" :required="true">
              <el-select v-model="planForm.type" placeholder="请选择" style="width: 446.67px;" clearable>
                <el-option v-for="item in planTypes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="计划等级" label-width="108px" :required="true">
              <el-select v-model="planForm.grade" placeholder="请选择" style="width: 446.67px;" clearable>
                <el-option v-for="item in planGrades" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <div class="tag-input-item">
              <div class="tag-input-lable"><span style="color: #ff4949; margin-right: 4px;">*</span>参与人</div>
              <!-- 显示框 -->
              <div class="tag-input" :class="person.participants.length > 0 ? 'tag-input-normal' : 'tag-input-error'">
                <el-tag v-if="person.participants.length > 0" closable :close-transition="false"
                  @close="handleRemovePerson(person.participants[0])">

                  <span>{{getPersonName(person.participants[0])}}</span>
                </el-tag>

                <span v-show="person.participants.length > 0" style="margin-left: 10px; color: #999;">+
                  {{person.participants.length}}</span>
              </div>

              <!-- 按钮 -->
              <div class="tag-input-btn" @click="handelParticipant">
                <i class="fas fa-plus" style="color: #fff;"></i>
              </div>

              <!-- 提示信息 -->
              <span class="tag-input-msg" v-show="person.participants.length == 0">请选择参与人</span>
            </div>

            <div class="tag-input-item">
              <div class="tag-input-lable"><span style="color: #ff4949; margin-right: 4px;">*</span>知晓人</div>
              <!-- 显示框 -->
              <div class="tag-input" :class="person.knowPersons.length > 0 ? 'tag-input-normal' : 'tag-input-error'">
                <el-tag v-if="person.knowPersons.length > 0" closable :close-transition="false"
                  @close="handleRemovePerson(person.knowPersons[0])">

                  <span>{{getPersonName(person.knowPersons[0])}}</span>
                </el-tag>

                <span v-show="person.knowPersons.length > 0" style="margin-left: 10px; color: #999;">+
                  {{person.knowPersons.length}}</span>
              </div>

              <!-- 按钮 -->
              <div class="tag-input-btn" @click="handelKnowPerson">
                <i class="fas fa-plus" style="color: #fff;"></i>
              </div>

              <!-- 提示信息 -->
              <span class="tag-input-msg" v-show="person.participants.length == 0">请选择知晓人</span>
            </div>


            <el-form-item label="时间" label-width="108px" :required="true">
              <el-date-picker style="width: 446.67px;" v-model="planForm.date" type="datetimerange" align="right"
                start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['09:00:00', '18:00:00']" clearable>
              </el-date-picker>
            </el-form-item>
            <el-form-item label="提醒设置" label-width="108px" :required="true">
              <el-select v-model="planForm.remind" placeholder="请选择" style="width: 446.67px;" clearable>
                <el-option v-for="item in remindList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联业务" label-width="108px" :required="true">
              <el-input placeholder="请输入内容" v-model="planForm.relateBusi" style="width: 446.67px;">
                <template slot="append">
                  <i class="fas fa-plus" style="color: #fff;"></i>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="转为外勤计划" label-width="108px" :required="true">
              <el-switch v-model="planForm.isExternal">
              </el-switch>
            </el-form-item>
            <el-form-item label="附件" label-width="108px" :required="true">
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
                :on-remove="handleRemove" :before-remove="beforeRemove" :file-list="planForm.fileList">
                <div style="color: #409EFF;">
                  <i class="fas fa-cloud-upload"></i>
                  <span style="margin-left: 10px;">添加附件</span>
                </div>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handelPlanDialogCancel">取 消</el-button>
          <el-button type="primary" @click="handelPlanDialogConfirm">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 参与人、知晓人、关联业务 -->
      <el-dialog title="请选择" :visible.sync="newPlanPersonDialogVisible" width="800px">
        <div class="container">
          <!-- 主体布局 -->
          <div class="selector-layout">
            <!-- 左侧部门面板 -->
            <div class="department-panel">
              <div class="department-list">
                <div v-for="dept in filteredDepartments" :key="dept.id" class="department-item"
                  :class="{active: activeDepartment === dept.id}" @click="selectDepartment(dept.id)">
                  {{ dept.name }}
                </div>
              </div>
            </div>

            <!-- 中间人员面板 -->
            <div class="person-panel">
              <div class="search-container">
                <el-input placeholder="搜索" clearable v-model="personSearch">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </div>
              <div class="person-header">
                <el-checkbox v-model="selectAll" @change="toggleSelectAll">全选</el-checkbox>
              </div>
              <div class="person-list">
                <div v-for="person in filteredPersons" :key="person.id" class="person-item">
                  <el-checkbox v-model="person.selected" @change="updateSelectedPersons(person)">
                  </el-checkbox>
                  <div class="person-info">
                    <div class="person-name">{{ person.name }}({{ person.position }})</div>
                    <div class="person-department">所属部门：{{ person.department }}</div>
                  </div>
                </div>

                <div v-if="filteredPersons.length === 0" class="no-data">
                  暂无数据
                </div>
              </div>
            </div>

            <!-- 右侧已选面板 -->
            <div class="selected-panel">
              <div class="search-container">
                <el-input placeholder="搜索" clearable v-model="personSearch">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </div>
              <div class="selected-list">
                <div v-for="person in selectedPersons" :key="'selected-' + person.id" class="selected-item">
                  <div class="person-info">
                    <div class="person-name">{{ person.name }}({{ person.position }})</div>
                    <div class="person-department">所属部门：{{ person.department }}</div>
                  </div>
                  <i class="el-icon-close remove-btn" @click="removeSelectedPerson(person)"></i>
                </div>

                <div v-if="selectedPersons.length === 0" class="no-data">
                  请从左侧选择人员
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handelNewPlanPersonCancel">取 消</el-button>
          <el-button type="primary" @click="handelNewPlanPersonConfirm">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 文本编辑器 -->
      <el-dialog title="写结果" :visible.sync="writeResultDialogVisible" width="800px">
        <div style="text-align: left; margin-bottom: 16px; margin-top: 16px;">计划内容</div>
        <div ref="editor" class="quill-text-editor"></div>

        <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
          :on-remove="handleRemove" :before-remove="beforeRemove" :file-list="planForm.fileList">
          <div style="color: #409EFF;">
            <i class="fas fa-cloud-upload"></i>
            <span style="margin-left: 10px;">添加附件</span>
          </div>
        </el-upload>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import Quill from 'quill';
  import 'quill/dist/quill.snow.css';

  export default {
    name: 'WorkPlan',
    data() {
      //const now = new Date();
      const todayDate = new Date(); // 2025-07-11
      return {
        activeTab: 'myPlan',
        viewMode: 'list',
        statusFilters: [],
        tabs: [{
            label: '我的计划',
            value: 'myPlan',
            notificationCount: 0
          },
          {
            label: '团队计划',
            value: 'teamPlan',
            notificationCount: 0
          },
          {
            label: '抄送我的',
            value: 'ccToMe',
            notificationCount: 0
          },
          {
            label: '我关注的',
            value: 'myFollow',
            notificationCount: 0
          }
        ],
        filters: [{
            label: '未完成 (0)',
            value: 'undone'
          },
          {
            label: '已完成 (0)',
            value: 'done'
          },
          {
            label: '已超时 (0)',
            value: 'timeout'
          }
        ],
        currentDate: todayDate,
        selectedDate: todayDate,
        collapsed: true,
        qureyParams: {
          level: '',
          type: '',
          isExternal: ''
        },
        selectedTask: null,
        tasks: [{
            id: 1,
            title: '产品需求评审',
            level: '一级',
            type: '日常工作',
            creator: '罗婷婷',
            createdAt: '07-11 16:16',
            startTime: '07-11 09:00',
            endTime: '07-11 18:00',
            isCompleted: true,
            isOverdue: false,
            content: '',
            participants: ['罗婷婷', '张明', '李华'],
            observers: ['系统管理员']
          },
          {
            id: 2,
            title: '技术方案讨论',
            level: '二级',
            type: '项目任务',
            creator: '王伟',
            createdAt: '07-11 10:20',
            startTime: '07-11 14:00',
            endTime: '07-11 16:00',
            isCompleted: true,
            isOverdue: false,
            content: '',
            participants: ['罗婷婷', '王伟', '赵强'],
            observers: ['系统管理员']
          },
          {
            id: 3,
            title: '项目周报提交',
            level: '三级',
            type: '日常工作',
            creator: '系统管理员',
            createdAt: '07-10 09:00',
            startTime: '07-11 10:00',
            endTime: '07-11 12:00',
            isCompleted: true,
            isOverdue: false,
            content: '',
            participants: ['罗婷婷', '所有成员'],
            observers: ['系统管理员']
          },
          {
            id: 4,
            title: '客户演示准备',
            level: '一级',
            type: '项目任务',
            creator: '李华',
            createdAt: '07-10 14:30',
            startTime: '07-11 15:00',
            endTime: '07-11 17:00',
            isCompleted: false,
            isOverdue: false,
            content: '',
            participants: ['罗婷婷', '李华', '王伟'],
            observers: ['系统管理员']
          },
          {
            id: 5,
            title: '项目进度协调会',
            level: '二级',
            type: '会议',
            creator: '张明',
            createdAt: '07-10 16:45',
            startTime: '07-11 14:30',
            endTime: '07-11 16:00',
            isCompleted: false,
            isOverdue: true,
            content: '',
            participants: ['罗婷婷', '张明', '赵强'],
            observers: ['系统管理员']
          }
        ],
        calendarDays: [],
        newPlanDialogVisible: false,
        planTypes: [{
          label: '会议',
          value: '01'
        }, {
          label: '日常工作',
          value: '02'
        }, {
          label: '企微沟通',
          value: '03'
        }, {
          label: '电话沟通',
          value: '04'
        }, {
          label: '内部培训',
          value: '05'
        }, {
          label: '客户来访',
          value: '07'
        }, {
          label: '外出拜访',
          value: '08'
        }, {
          label: '其他',
          value: '09'
        }],
        planGrades: [{
          label: '正常',
          value: '01'
        }, {
          label: '一般',
          value: '02'
        }, {
          label: '重要',
          value: '03'
        }, {
          label: '紧急',
          value: '04'
        }],
        remindList: [{
          label: '开始时',
          value: '01'
        }, {
          label: '5分钟前',
          value: '02'
        }, {
          label: '10分钟前',
          value: '03'
        }, {
          label: '15分钟前',
          value: '04'
        }, {
          label: '20分钟前',
          value: '05'
        }, {
          label: '25分钟前',
          value: '06'
        }, {
          label: '30分钟前',
          value: '07'
        }, {
          label: '1小时前',
          value: '08'
        }, {
          label: '2小时前',
          value: '09'
        }, {
          label: '1天前',
          value: '10'
        }, {
          label: '2天前',
          value: '11'
        }],
        planForm: {
          editor: null,
          title: null,
          htmlContent: '',
          type: null,
          grade: null,
          participant: null,
          knowPerson: null,
          date: this.currentDate,
          remind: null,
          relateBusi: null,
          isExternal: null,
          fileList: []
        },

        person: {
          type: '',
          participants: [],
          knowPersons: []
        },

        newPlanPersonDialogVisible: false,
        departmentSearch: '',
        personSearch: '',
        selectAll: false,
        activeDepartment: 'all',

        departments: [{
            id: 'all',
            name: '全部'
          },
          {
            id: 'default',
            name: '默认部门'
          },
          {
            id: 'zixiang',
            name: '紫翔生物'
          },
          {
            id: 'general',
            name: '总经办'
          },
          {
            id: 'cooperation',
            name: '解除合作'
          },
          {
            id: 'audit',
            name: '审核组'
          },
          {
            id: 'service',
            name: '服务商管理'
          },
          {
            id: 'other1',
            name: '其他1（待设置部门）'
          },
          {
            id: 'other2',
            name: '其他2（待设置部门）'
          },
          {
            id: 'other3',
            name: '其他3'
          },
          {
            id: 'other4',
            name: '其他1（待设置部门）'
          }
        ],

        persons: [{
            id: 1,
            name: '系统管理员',
            position: '系统管理员',
            department: '默认部门',
            selected: false
          },
          {
            id: 2,
            name: '肖蓉蓉',
            position: '推广服务人员',
            department: '默认部门',
            selected: false
          },
          {
            id: 3,
            name: '陈萍',
            position: '总经理',
            department: '紫翔生物,总经办',
            selected: false
          },
          {
            id: 4,
            name: '文翎',
            position: '重庆总经理',
            department: '重庆服务商管理(中生),重庆服务商管理',
            selected: false
          },
          {
            id: 5,
            name: '李桂琴',
            position: '办公室主任',
            department: '总经办,审核组3',
            selected: false
          },
          {
            id: 6,
            name: '张婷',
            position: '运营助理',
            department: '总经办',
            selected: false
          },
          {
            id: 7,
            name: '何杰',
            position: '推广服务人员',
            department: '解除合作',
            selected: false
          },
          {
            id: 8,
            name: '彭思怡',
            position: '行政专员',
            department: '总经办',
            selected: true
          }
        ],

        selectedPersons: [],

        writeResultDialogVisible: false
      };
    },
    created() {
      this.generateCalendar()
    },
    mounted() {
      // 初始化已选人员（彭思怡默认被选中）
      this.selectedPersons = this.persons.filter(person => person.selected);
    },
    computed: {
      // 计算当前激活标签的名称
      activeTabLabel() {
        const tab = this.tabs.find(t => t.value === this.activeTab);
        return tab ? tab.label : '计划';
      },
      // 当前视图模式的名称
      viewModeLabel() {
        this.collapsed = true
        return this.viewMode === 'calendar' ? '日历' : '列表';
      },
      currentMonth() {
        const year = this.currentDate.getFullYear();
        const month = this.currentDate.getMonth() + 1;
        return `${year}年${month}月`;
      },
      selectedDateString() {
        const year = this.selectedDate.getFullYear();
        const month = String(this.selectedDate.getMonth() + 1).padStart(2, '0');
        const date = String(this.selectedDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${date}`;
      },
      dayOfWeek() {
        const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        return days[this.selectedDate.getDay()];
      },
      filteredTasks() {
        return this.tasks;
      },
      pendingTasks() {
        return this.filteredTasks
          .filter(task => !task.isCompleted && !task.isOverdue);
      },
      completedTasks() {
        return this.filteredTasks
          .filter(task => task.isCompleted);
      },
      overdueTasks() {
        return this.filteredTasks
          .filter(task => !task.isCompleted && task.isOverdue);
      },
      pendingCount() {
        return this.pendingTasks.length;
      },
      completedCount() {
        return this.completedTasks.length;
      },
      overdueCount() {
        return this.overdueTasks.length;
      },
      totalTasks() {
        return this.filteredTasks.length;
      },
      filteredDepartments() {
        if (!this.departmentSearch) return this.departments;

        return this.departments.filter(dept =>
          dept.name.toLowerCase().includes(this.departmentSearch.toLowerCase())
        );
      },

      filteredPersons() {
        let filtered = this.persons;

        // 按部门筛选
        if (this.activeDepartment !== 'all') {
          const deptName = this.getDepartmentName(this.activeDepartment);
          filtered = filtered.filter(person =>
            person.department.includes(deptName)
          );
        }

        // 按搜索词筛选
        if (this.personSearch) {
          const searchTerm = this.personSearch.toLowerCase();
          filtered = filtered.filter(person =>
            person.name.toLowerCase().includes(searchTerm) ||
            person.position.toLowerCase().includes(searchTerm) ||
            person.department.toLowerCase().includes(searchTerm)
          );
        }

        return filtered;
      }
    },
    methods: {
      // 切换标签页
      switchTab(tabValue) {
        this.activeTab = tabValue;
        console.log('切换到标签页:', this.activeTabLabel);
      },
      // 切换视图
      switchView(viewType) {
        this.viewMode = viewType;
        console.log('切换视图为:', this.viewModeLabel);
      },
      // 状态筛选变化处理
      handleFilterChange(values) {
        console.log('应用状态筛选:', values);
      },
      // 创建新计划
      createNewPlan() {
        this.newPlanDialogVisible = true
        this.$nextTick(() => {
          // 确保 DOM 更新完成后初始化编辑器
          this.initEditor();
        });
      },
      initEditor() {
        if (this.planForm.editor) {
          return
        }

        const toolbarOptions = [
          ['bold'],
          [{
            list: 'ordered'
          }, {
            list: 'bullet'
          }],
          ['image']
        ];

        this.planForm.editor = new Quill(this.$refs.editor, {
          modules: {
            toolbar: toolbarOptions
          },
          theme: 'snow'
        });
      },
      handelPlanDialogCancel() {
        // 清除实例
        if (this.planForm.editor) {
          this.$refs.editor.innerHTML = ''; // 清空容器
          this.planForm.editor.off()

          this.planForm.editor.container.innerHTML = ''; // 清空编辑器内容

          const toolbar = this.planForm.editor.getModule('toolbar');
          if (toolbar) {
            toolbar.container.remove(); // 删除工具条DOM
          }

          this.planForm.editor = null; // 删除引用，等待垃圾回收
        }

        // 清空数据
        this.planForm = {}

        this.newPlanDialogVisible = false
        this.clearAllSelected();
      },
      handelPlanDialogConfirm() {
        this.planForm.htmlContent = this.planForm.editor.root.innerHTML;

        console.log(this.planForm)
        for (var i = 0; i < this.tasks.length; i++) {
          this.tasks[i].content = this.planForm.htmlContent
        }

        this.handelPlanDialogCancel()
      },
      generateCalendar() {
        this.calendarDays = [];

        const current = new Date(this.currentDate);

        current.setDate(1); // 设置为当月第一天

        // 计算第一天是星期几 (0是星期日)
        const firstDayIndex = current.getDay();

        // 计算上个月的最后几天
        const prevMonthLastDay = new Date(current);
        prevMonthLastDay.setDate(0);

        // 填充上个月的最后几天
        for (let i = firstDayIndex - 1; i >= 0; i--) {
          const date = new Date(prevMonthLastDay);
          date.setDate(prevMonthLastDay.getDate() - i);
          date.setHours(12); // 避免时区问题

          this.calendarDays.push({
            date,
            isCurrentMonth: false,
            taskCount: Math.floor(Math.random() * 3) // 随机任务数用于演示
          });
        }

        // 当前月
        const lastDay = new Date(current.getFullYear(), current.getMonth() + 1, 0);

        for (let i = 1; i <= lastDay.getDate(); i++) {
          const date = new Date(current);
          date.setDate(i);
          date.setHours(12); // 避免时区问题

          // 演示数据：11号那天有5个任务
          let taskCount = i === 11 ? 5 : Math.floor(Math.random() * 3);

          this.calendarDays.push({
            date,
            isCurrentMonth: true,
            taskCount
          });
        }

        // 下个月的前几天（填充剩余空间）
        const totalCells = 42; // 6行7列
        const nextDays = totalCells - this.calendarDays.length;

        for (let i = 1; i <= nextDays; i++) {
          const date = new Date(lastDay);
          date.setDate(lastDay.getDate() + i);
          date.setHours(12); // 避免时区问题

          this.calendarDays.push({
            date,
            isCurrentMonth: false,
            taskCount: Math.floor(Math.random() * 3)
          });
        }
      },
      prevMonth() {
        this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
        this.generateCalendar();
      },
      nextMonth() {
        this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
        this.generateCalendar();
      },
      selectDay(day) {
        this.selectedDate = new Date(day.date);
        this.selectedTask = null;
      },
      isSelectedDay(day) {
        return (
          day.date.getDate() === this.selectedDate.getDate() &&
          day.date.getMonth() === this.selectedDate.getMonth() &&
          day.date.getFullYear() === this.selectedDate.getFullYear()
        );
      },
      isToday(date) {
        const today = new Date();
        return (
          date.getDate() === today.getDate() &&
          date.getMonth() === today.getMonth() &&
          date.getFullYear() === today.getFullYear()
        );
      },
      selectTask(task) {
        this.selectedTask = task;
        this.collapsed = false
      },

      handelParticipant() {
        this.person.type = '01'
        this.newPlanPersonDialogVisible = true
      },
      handelKnowPerson() {
        this.person.type = '02'
        this.newPlanPersonDialogVisible = true
      },
      handelRelateBusi() {
        this.newPlanPersonDialogVisible = true
      },
      getPersonName(person) {
        if (person) {
          return person.name
        }
      },
      handleRemovePerson(person) {
        this.selectedPersons.splice(this.selectedPersons.indexOf(person), 1);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      // 获取部门名称
      getDepartmentName(id) {
        const dept = this.departments.find(d => d.id === id);
        return dept ? dept.name : '';
      },

      // 选择部门
      selectDepartment(id) {
        this.activeDepartment = id;
        this.selectAll = false;
      },

      // 全选/取消全选
      toggleSelectAll() {
        this.filteredPersons.forEach(person => {
          person.selected = this.selectAll;
          this.updateSelectedPersons(person);
        });
      },

      // 更新已选人员列表
      updateSelectedPersons(person) {
        if (this.person.type == "01") {
          this.selectedPersons = this.person.participants
        } else if (this.person.type == "02") {
          this.selectedPersons = this.person.knowPersons
        }
        if (person.selected) {

          // 添加到已选列表（如果不存在）
          if (!this.selectedPersons.some(p => p.id === person.id)) {
            this.selectedPersons.push(person);
          }
        } else {
          // 从已选列表移除
          this.selectedPersons = this.selectedPersons.filter(p => p.id !== person.id);
        }

        // 更新selectAll状态
        this.$nextTick(() => {
          const allSelected = this.filteredPersons.length > 0 &&
            this.filteredPersons.every(p => p.selected);
          this.selectAll = allSelected;
        });
      },

      // 移除单个已选人员
      removeSelectedPerson(person) {
        // 从已选列表移除
        this.selectedPersons = this.selectedPersons.filter(p => p.id !== person.id);

        // 更新原列表中的选中状态
        const targetPerson = this.persons.find(p => p.id === person.id);
        if (targetPerson) {
          targetPerson.selected = false;
        }

        // 更新全选状态
        this.selectAll = false;
      },

      // 移除全部已选人员
      clearAllSelected() {
        this.selectedPersons = [];
        this.persons.forEach(person => {
          person.selected = false;
        });
        this.selectAll = false;
      },

      // 取消操作
      handelNewPlanPersonCancel() {
        this.newPlanPersonDialogVisible = false
        //this.clearAllSelected();
      },

      // 确定操作
      handelNewPlanPersonConfirm() {
        console.log('已选择人员:', this.selectedPersons);

        if (this.person.type == '01') {
          //参与人
          this.person.participants = this.selectedPersons
        } else if (this.person.type == '02') {
          //知晓人
          this.person.knowPersons = this.selectedPersons
        }
        this.newPlanPersonDialogVisible = false
      },
      handleWriteResult() {
        this.writeResultDialogVisible = true
      }
    }
  }
</script>
<style scoped>
  /* 导航栏样式 */
  .nav-container {
    background: #f0f3f5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
  }

  .tabs-section {
    display: flex;
    align-items: center;
    flex-grow: 1;
  }

  .tab-item {
    margin-right: 32px;
    padding: 4px 0;
    cursor: pointer;
    font-size: 16px;
    color: #606266;
    font-weight: 500;
    position: relative;
    transition: all 0.3s;
  }

  .tab-item:hover {
    color: #409EFF;
  }

  .tab-item.active {
    color: #409EFF;
  }

  .tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #409EFF;
    border-radius: 2px;
  }

  /* 右侧功能区样式 */
  .actions-section {
    display: flex;
    align-items: center;
  }

  .status-filters {
    display: flex;
    background-color: #fff;
    height: 32px;
    line-height: 32px;
    margin-right: 20px;
    padding-left: 20px;
  }

  .status-checkbox {
    margin-right: 20px;
  }

  .el-button-group {
    margin-left: 15px;
  }

  .create-button {
    font-weight: 500;
  }

  .content-container {
    display: flex;
    margin: 0 auto;
    padding: 16px;
    background-color: #f0f3f5;
    height: calc(100vh - 150px);
  }

  /* 左侧边栏 */
  .sidebar {
    width: 280px;
    background: #fafafa;
    padding: 16px;
    display: flex;
    flex-direction: column;
  }

  .panel-header {
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 12px;
    margin-bottom: 16px;
    padding: 16px;
    border-bottom: 1px solid #ebeef5;
  }

  /* 日历部分 */
  .calendar-section {
    margin-bottom: 20px;
  }

  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .calendar-month {
    font-size: 16px;
    font-weight: 600;
  }

  .calendar-controls {
    display: flex;
    gap: 8px;
  }

  .calendar-btn {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .calendar-btn:hover {
    background-color: #f0f7ff;
    color: #409EFF;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 15px;
  }

  .weekday {
    text-align: center;
    font-size: 12px;
    padding: 8px 0;
    font-weight: normal;
  }

  .calendar-day {
    text-align: center;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    font-size: 13px;
    position: relative;
    transition: all 0.2s;
  }

  .calendar-day:hover {
    background-color: #f0f7ff;
  }

  .calendar-day.not-current {
    color: #c0c4cc;
  }

  .calendar-day.today {
    color: #409EFF;
    font-weight: bold;
  }

  .calendar-day.selected {
    background-color: #409EFF;
    color: white;
  }

  .calendar-day.has-tasks::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #ff0000;
    border-radius: 50%;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 筛选部分 */
  .filter-control {
    width: 100%;
    margin-bottom: 16px;
  }

  .filter-label {
    font-size: 13px;
    margin-bottom: 6px;
    text-align: left;
  }

  /* 中间任务列表 */
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background-color: #fff;
    /* height: calc(100vh - 88px); */
  }

  .date-header {
    background: white;
    margin-bottom: 16px;
    padding: 16px;
  }

  .date-title {
    font-size: 16px;
    font-weight: 600;
  }

  .date-stats {
    display: flex;
    gap: 20px;
  }

  .date-stat {
    display: flex;
    align-items: center;
    font-size: 13px;
    gap: 4px;
  }

  .stat-value {
    font-weight: 600;
  }

  .task-list-container {
    flex: 1;
    background: white;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .task-section {
    margin-bottom: 24px;
  }

  .section-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-count {
    color: #909399;
    font-weight: normal;
    font-size: 14px;
  }

  .task-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .task-item {
    padding: 16px;
    border-radius: 6px;
    border-left: 4px solid #409EFF;
    background-color: #f5f7fa;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
  }

  .task-item:hover {
    background-color: #ecf5ff;
    transform: translateY(-2px);
  }

  .task-item.overdue {
    border-left-color: #f56c6c;
  }

  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .task-tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    color: white;
  }

  .tag-normal {
    background-color: #409EFF;
  }

  .tag-overdue {
    background-color: #f56c6c;
  }

  .tag-completed {
    background-color: #67c23a;
  }

  .task-creator {
    font-size: 12px;
    color: #909399;
  }

  .task-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .task-time {
    font-size: 13px;
    color: #606266;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .task-meta {
    display: flex;
    gap: 15px;
  }

  .task-type,
  .task-level {
    font-size: 12px;
    color: #909399;
    background: #eef0f4;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .no-tasks {
    color: #909399;
    font-size: 14px;
    text-align: center;
    padding: 24px;
  }

  /* 右侧详情面板 */
  .detail-panel {
    width: 480px;
    background: white;
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
    overflow-y: auto;
    border-bottom: solid 1px #ebeef5;
  }

  .task-info-panel {
    overflow-y: auto;
    border-bottom: solid 1px #ebeef5;
  }

  .collapse-btn {
    position: absolute;
    top: 20px;
    left: -15px;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    color: #909399;
    z-index: 10;
  }

  .task-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #ebeef5;
  }

  .stat-item {
    text-align: center;
  }

  .stat-value {
    font-size: 22px;
    font-weight: bold;
    color: #409EFF;
  }

  .stat-label {
    font-size: 13px;
    color: #909399;
  }

  .info-row {
    display: flex;
    margin-bottom: 14px;
  }

  .info-label {
    width: 70px;
    color: #606266;
    font-size: 14px;
    font-weight: 500;
  }

  .info-value {
    flex: 1;
    font-size: 14px;
    color: #303133;
  }

  .info-task-content {
    text-align: left;
  }

  ::v-deep .info-task-content img {
    max-width: 30%;
    height: auto;
  }

  .info-row-title {
    display: inline-block;
    margin-top: 20px;
    font-size: 13px;
    color: #999;
  }

  .participants-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }

  .participant-badge {
    padding: 4px 10px;
    background: #ecf5ff;
    color: #409EFF;
    border-radius: 4px;
    font-size: 12px;
  }

  .info-task-result {}

  .action-buttons {
    width: 100px;
    position: absolute;
    display: flex;
    margin-top: auto;
    gap: 16px;
    padding-top: 20px;
    bottom: 16px;
  }

  .action-button {
    flex: 1;
    padding: 10px;
    background-color: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
  }

  .collapsed {
    width: 0px;
    padding: 16px;
  }

  /* 参与人、知晓人、关联业务 */
  .container {
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
  }

  .panel-title {
    height: 56px;
    padding: 0 20px;
    line-height: 56px;
    font-size: 18px;
    font-weight: 500;
    color: #303133;
    border-bottom: 1px solid #ebeef5;
  }

  .selector-layout {
    display: flex;
    height: 500px;
  }

  .department-panel {
    width: 224px;
    border-right: 1px solid #ebeef5;
    display: flex;
    flex-direction: column;
  }

  .search-container {
    padding: 15px;
    border-bottom: 1px solid #ebeef5;
  }

  .department-list {
    flex: 1;
    overflow-y: auto;
  }

  .department-item {
    padding: 12px 20px;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    transition: all 0.3s;
    border-left: 3px solid transparent;
  }

  .department-item:hover {
    background-color: #f5f7fa;
    color: #409eff;
  }

  .department-item.active {
    background-color: #ecf5ff;
    color: #409eff;
    border-left: 3px solid #409eff;
    font-weight: 500;
  }

  .person-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .person-header {
    padding: 11.5px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
  }

  .person-list {
    flex: 1;
    max-height: 390px;
    overflow-y: auto;
    padding: 10px 15px;
  }

  .person-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
  }

  .person-info {
    flex: 1;
    margin-left: 10px;
    padding-top: 2px;
  }

  .person-name {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    line-height: 1.5;
  }

  .person-position {
    font-size: 12px;
    color: #606266;
    margin-top: 2px;
  }

  .person-department {
    font-size: 12px;
    color: #909399;
    margin-top: 3px;
  }

  .selected-panel {
    width: 240px;
    border-left: 1px solid #ebeef5;
    display: flex;
    flex-direction: column;
  }

  .selected-header {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #ebeef5;
  }

  .remove-all-btn {
    font-size: 14px;
    color: #f56c6c;
    cursor: pointer;
  }

  .remove-all-btn:hover {
    text-decoration: underline;
  }

  .selected-list {
    flex: 1;
    max-height: 433px;
    overflow-y: auto;
    padding: 10px 15px;
  }

  .selected-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;
  }

  .selected-item .person-info {
    flex: 1;
  }

  .remove-btn {
    color: #f56c6c;
    cursor: pointer;
    padding: 5px;
  }

  .footer-actions {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #ebeef5;
  }

  .selected-count {
    font-size: 14px;
    color: #606266;
    margin-right: 15px;
  }

  .el-checkbox__label {
    vertical-align: middle;
  }

  .no-data {
    text-align: center;
    padding: 40px 0;
    color: #909399;
    font-size: 14px;
  }

  /*  */
  .tag-input-item {
    margin-bottom: 8px;
  }

  .tag-input-lable {
    width: 108px;
    height: 40px;
    vertical-align: top;
    display: inline-flex;
    align-items: center;
    /* 垂直居中 */
    font-weight: bold;
  }

  .tag-input {
    width: 401.4px;
    height: 40px;
    padding: 0 15px;
    align-items: center;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-flex;
  }

  .tag-input-btn {
    width: 40px;
    height: 40px;
    padding: 0 15px;
    vertical-align: top;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #fff;
    align-items: center;
    /* 垂直居中 */
    background-color: #409EFF;
    display: inline-flex;
  }

  .tag-input-msg {
    font-size: 12px;
    padding-left: 108px;
    color: #f56c6c;
  }

  .tag-input-normal {
    border: 1px solid #dcdfe6;
  }

  .tag-input-error {
    border: 1px solid #f56c6c;
  }

  .quill-text-editor {
    height: 200px;
    margin-bottom: 20px;
  }


  /* 右侧 */
  .font13 {
    font-size: 13px;
  }

  .font18 {
    font-size: 18px;
  }

  .font28 {
    font-size: 28px;
  }

  .bor_b1 {
    border-bottom: 1px solid;
  }

  .bor_e {
    border-color: #eee !important;
  }

  .flexwrap {
    display: flex;
    flex-wrap: wrap;
  }

  .mlr_1 {
    margin-left: 10px;
    margin-right: 10px;
  }

  .mlr_15 {
    margin-left: 15px;
    margin-right: 15px;
  }

  .mt_5 {
    margin-top: 5px;
  }

  .mt_15 {
    margin-top: 15px;
  }

  .ml_5 {
    margin-left: 5px;
  }

  .ml_10 {
    margin-left: 10px;
  }

  .mt_20 {
    margin-top: 20px;
  }

  .mp_0 {
    margin: 0;
    padding: 0;
  }

  .pdtb_2 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .pdlr_2 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .in_block {
    display: inline-block;
  }

  .flex {
    display: flex;
  }

  .verticall {
    justify-content: left;
  }

  .verticala,
  .verticall {
    display: flex;
    align-items: center;
  }

  .col6 {
    color: #666;
  }

  .cole9 {
    color: #e91c47;
  }

  .col9 {
    color: #999;
  }

  .col2c68 {
    color: #2c68ff;
  }

  .in_block {
    display: inline-block;
  }

  .radius_2 {
    border-radius: 2px;
  }

  .icon12 {
    width: 12px;
    height: 12px;
  }

  .clear {
    zoom: 1;
  }

  .left {
    float: left;
  }

  .right {
    float: right;
  }

  .schedule-score {
    width: 100px;
    height: 80px;
    background: #f7f9ff;
    border: 1px solid rgba(57, 113, 255, .2);
    border-radius: 6px;
  }

  .flexcol,
  .flexcola {
    display: flex;
    flex-direction: column;
  }

  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wit10 {
    width: 100%;
  }

  .bor_t1 {
    border-top: 1px solid;
  }

  .bgf {
    background: #fff;
  }

  .pointer,
  .pointer_2c {
    cursor: pointer;
  }

  .vertical-align-b {
    vertical-align: bottom;
  }

  .relative {
    position: relative;
  }

  .font18 {
    font-size: 18px;
  }

  .feelec {
    font-family: feelec !important;
    font-size: 16px;
    font-style: normal;
  }

  .lic1 {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  .ovf,
  .ovf1 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }

  .ovf {
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
  }

  ::v-deep .el-input-group__append {
    background-color: #409EFF !important;
    /* 浅蓝色背景 */
    border-left: none;
    /* 可选：移除左侧边框 */
    cursor: pointer;
  }

  ::v-deep .el-dialog__body {
    padding: 30px 0 !important;
  }

  ::v-deep .quill-text-editor img {
    max-width: 30%;
    height: auto;
  }
</style>
